<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <style type="text/css">

        .checkIn-input-lock::-webkit-input-placeholder {
            color: rgb(6, 3, 7);
        }

        .stateIcon {

            display: flex;
            width: 20px;
            height: 20px;

            margin-top: -3px;

        }

        .main-layout {
            padding: 0.12rem 0;
        }

        .main-layout .list-card {
            min-height: 1.2rem;
        }

        .main-layout .item-card {
            border-radius: 12px;
            overflow: hidden;
            margin-left: 5px;
            margin-right: 5px;
        }

        .recommond__wrap .recommond__title img {
            height: 0.19rem;
        }

        .presell-banner .presellbanner-text .presellbanner-title img {
            height: 0.14rem;
        }

        .presell-banner .presellbanner-img div {
            height: 0.24rem;
            width: 0.24rem;
            background-size: cover;
            margin-left: 5px;
        }

        .tippy-tooltip.alpha-theme .more-buttons > div {
            margin-bottom: 0.04rem;
        }

        .tippy-tooltip.alpha-theme .more-buttons > div:last-child {
            margin-bottom: 0;
        }

        .searchbar__wrap .searchbar__input input {
            width: 100%;
            font-size: 14px;
            padding: 0.05rem 0.1rem 0.05rem 0.3rem;
            border: none;
            -webkit-appearance: none;
            border-radius: 0;
        }

        .alert-container .alert-content .alert-btn-group > button {
            border: 0;
            background-color: transparent;
            width: 100%;
            height: 100%;
        }

        .picker-container *,
        .picker-container *:before,
        .picker-container *:after {
            box-sizing: border-box;
        }

        .picker-modal header {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            width: 100%;
            height: 0.4rem;
            padding: 0 0.15rem;
            background-color: #fbf9fe;
        }

        .picker-modal header a {
            text-decoration: none;
            color: #04BE02;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>


    <script type="text/javascript">
        top.top.setTitle("待处理订单");
    </script>

</head>

<body style="font-size: 16px;">


<div style="height: 100%;width: 100%;display: none" id="withhold-deposit-panel">

    <style>


        .withhold-deposit-all {
            width: 39%;
            margin: 0;
            margin-left: 2px;
            float: left;
            height: 40px;
            border-style: solid;
            border-width: 0;
            border-radius: 5px;
            display: inline-block;
            background-color: rgba(249, 255, 253, 0.8);
        }

        .withhold-deposit-check {
            background-color: #78cfff;
        !important;
        }

    </style>


    <a onclick="wd.close()" style="right: 20px;background-position: -56px -48px;position: absolute;">
        <svg t="1552147283192" class="icon" style="width: 30px;height: 30px;" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="2187" width="200"
             height="200">
            <defs>
                <style type="text/css"></style>
            </defs>
            <path d="M0 0C0 565.539584 458.460416 1024 1024 1024L1024 0 0 0 0 0 0 0ZM608.127206 426.810982 734.960256 553.892762C744.888294 563.840256 744.83817 580.030848 734.84073 590.047872 724.773606 600.134758 708.687795 600.118528 698.756378 590.167629L571.923328 463.08585 445.090278 590.167629C435.162266 600.115123 419.003366 600.064922 409.005926 590.047872 398.938803 579.961011 398.955008 563.843661 408.886426 553.892762L535.719475 426.810982 408.886426 299.729203C398.958387 289.781709 399.008512 273.591117 409.005926 263.574093 419.07305 253.487206 435.158861 253.503437 445.090278 263.454336L571.923328 390.536115 698.756378 263.454336C708.684416 253.506842 724.843315 253.557043 734.84073 263.574093 744.907853 273.660954 744.891674 289.778304 734.960256 299.729203L608.127206 426.810982 608.127206 426.810982 608.127206 426.810982 608.127206 426.810982Z"
                  p-id="2188" fill="#1296db"></path>
        </svg>
    </a>

    <div style="padding-top: 80px;padding-bottom:50px;background-color: #98d3d8;margin: 20px;font: 62.5%/1 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif;

">
        <div>

            <div style="padding-left: 10%;padding-right: 10%">
                <label>
                    <input onblur="window.scroll(0,0)" id="withhold-deposit-reason" placeholder="扣留原因" style="  display: block;
                    width: 100%;
    position: relative;
        height: 40px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    transition: .3s;
    font-size: 14px;
    color: #666;">
                </label>
            </div>

            <div style="margin-top: 10px;display: flex;padding-left: 10%;padding-right: 10%">

                <input onblur="window.scroll(0,0)" id="withhold-deposit-value" placeholder="扣留金额(元)" type="number"
                       style="

    position: relative;
    padding: 10px 15px;
    height: 40px;
    border: 1px solid #ddd;
    transition: .3s;
    font-size: 14px;
    color: #666;
    width: 60%;
    display: inline-block;">

                <button id="withhold-deposit-all" class="withhold-deposit-all">

                </button>

            </div>

        </div>


        <button

                id="withhold-deposit-submit"

                style="display: block;
    height: 40px;
    line-height: 40px;
    width: 50%;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
    background: #3f89ec;
    border: 0;
    margin-left: 25%;
    margin-top: 30px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s;">

            提交

        </button>

    </div>


    <script>


        let av;

        let cb;

        let wdv = $('#withhold-deposit-value');

        let all = $('#withhold-deposit-all');

        let rs = $('#withhold-deposit-reason');

        let sb = $('#withhold-deposit-submit');

        var wd = {

            init: function (allV, callback) {

                av = allV;

                cb = callback;

                wdv.val('');

                rs.val('');

                all.text(av + '元');

            },

            open: function (allV, callback) {

                this.init(allV, callback);

                $('#withhold-deposit-panel').show();
            },

            close: function () {

                $('#withhold-deposit-panel').hide();

                rs.val('');

                wdv.val('');

                all.removeClass('withhold-deposit-check');

            }


        };

        sb.click(function () {

            if (!rs.val() || rs.val().length < 2) {
                alert('扣留原因至少两个字');
                return;
            }

            if (!wdv.val() || wdv.val() === 0) {
                alert('无效的扣留金额');
                return;
            }

            cb(wdv.val(), rs.val());

        });

        all.click(function () {

            all.addClass('withhold-deposit-check');

            wdv.val(av);

        });

        wdv.click(function () {
            all.removeClass('withhold-deposit-check');
            wdv.val('');
        });

        rs.bind('input', function () {
            if (this.value.length > 15) {
                this.value = this.value.substr(0, 15);
            }
        });

        wdv.bind('input keydown', function (e) {

            if (e.type === 'input') {

                if (this.value > av) {
                    this.value = '';
                    alert('超出押金上限');
                } else if (this.value === av + '') {
                    all.addClass('withhold-deposit-check');
                }

            } else if (e.type === 'keydown' && e.key === 'Backspace') {
                all.removeClass('withhold-deposit-check');
            }

        });


    </script>
</div>


<div class="main-layout" id="payed_order_list" style="overflow: hidden;background-color: #e8e8e8">

    <ul class="list-card" style="display: block;">
    </ul>
</div>

</body>


<script src="//cdn.staticfile.org/stomp.js/2.3.3/stomp.min.js"></script>
<script src="//cdn.staticfile.org/sockjs-client/1.3.0/sockjs.min.js"></script>

<script src="//cdn.staticfile.org/iScroll/5.2.0/iscroll.min.js"></script>

<script src="js/message.js"></script>


<script>


    /*
    状态集合由三部分组成:

        状态头:显示当前订单的状态图标已经状态名称
        操作条:底部
        绑定函数:绑定操作条上的按钮逻辑
    */


    function stateText(text) {
        return '<b class="stateText">' + text + '</b>';
    }

    let stateMap = {

        '1': {

            stateIcon: '                        <svg t="1551624536473" class="stateIcon" style="" viewBox="0 0 1024 1024" version="1.1"' +
                '                             xmlns="http://www.w3.org/2000/svg" p-id="1119" xmlns:xlink="http://www.w3.org/1999/xlink"' +
                '                             width="200" height="200">' +
                '                            <defs>' +
                '                                <style type="text/css"></style>' +
                '                            </defs>' +
                '                            <path d="M390.144 945.152c-153.6 0-278.528-124.928-278.528-278.528V413.696c0-25.6 20.48-46.08 46.08-46.08h463.872c25.6 0 46.08 20.48 46.08 46.08v252.928c1.024 153.6-123.904 278.528-277.504 278.528zM159.744 414.72v252.928c0 128 103.424 231.424 231.424 231.424s231.424-103.424 231.424-231.424V414.72H159.744z"' +
                '                                  fill="#4C4C4C" p-id="1120"></path>' +
                '                            <path d="M676.864 775.168c-12.288 0-24.576-1.024-36.864-4.096l10.24-46.08c9.216 2.048 17.408 3.072 26.624 3.072 63.488 0 114.688-46.08 114.688-103.424s-51.2-103.424-114.688-103.424c-9.216 0-18.432 1.024-26.624 3.072l-10.24-46.08c12.288-3.072 24.576-4.096 36.864-4.096 89.088 0 161.792 67.584 161.792 150.528s-72.704 150.528-161.792 150.528z"' +
                '                                  fill="#4C4C4C" p-id="1121"></path>' +
                '                            <path d="M241.664 362.496c-19.456 0-34.816-15.36-34.816-34.816V157.696c0-19.456 15.36-34.816 34.816-34.816s34.816 15.36 34.816 34.816V327.68c1.024 19.456-15.36 34.816-34.816 34.816zM411.648 362.496c-19.456 0-34.816-15.36-34.816-34.816V51.2c0-19.456 15.36-34.816 34.816-34.816s34.816 15.36 34.816 34.816v276.48c1.024 19.456-15.36 34.816-34.816 34.816zM539.648 362.496c-19.456 0-34.816-15.36-34.816-34.816V178.176c0-19.456 15.36-34.816 34.816-34.816s34.816 15.36 34.816 34.816V327.68c0 19.456-15.36 34.816-34.816 34.816z"' +
                '                                  fill="#FFA028" p-id="1122"></path>' +
                '                        </svg>',

            stateText: stateText('等待受理'),


            opeBar: function (order) {

                return '<div class="opeBar"  style="display: flex; overflow: hidden; height: 32.4px; width: 100%; background-color: rgb(255, 255, 255); position: relative;">                <div  style="overflow: hidden; height: 20px; width: 72.25px;left: 10px;top: 3px; border-radius: 15px; visibility: visible; border-color: rgb(105,158,210); border-style: solid; border-width: 1px; place-self: flex-start; position: relative;">      <div  style="display: flex; overflow: hidden; position: absolute; color: rgb(105,158,210); height: 100%; width: 71.253px; font-size: 13px; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;" class="accept_bt"><span style="text-overflow: ellipsis; overflow: hidden; line-height: 15.6px; white-space: nowrap;">受理</span> </div> </div> <div  style="display: flex; overflow: hidden; position: absolute; height: auto; width: fit-content; margin-right: 12px; right: 0px; top: 0px; margin-bottom: 12px; margin-top: 6px;">                                    <div  style="display: flex; overflow: hidden; flex: 0 0 auto; margin-left: 12.896px; color: rgb(153, 153, 153); height: auto; width: fit-content; font-size: 12px; visibility: visible; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">                                        <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;">总费用</span>                                    </div>                                    <div  style="display: flex; overflow: hidden; flex: 0 0 auto; margin-left: 12.896px; font-size: 12px; color: rgb(51, 51, 51); visibility: visible; height: auto; width: fit-content; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">                                        <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;">合计:￥' + order.cost + '</span>                                    </div>                                </div>                            </div>';

            },

            bindOpe: function (itemId, order) {

                $(itemId + ' .accept_bt').click(function () {

                    //调用受理接口
                    $.post('/order/landlord/transact/accept', {id: order.id}, function () {
                        changeState(itemId, order, '2');
                    });

                });


            }

        },


        '2': {

            stateIcon: '<svg t="1551628812633" class="stateIcon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1731" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M775.470135 128.789225 248.530888 128.789225c-66.121953 0-119.730918 53.607942-119.730918 119.753431l0 526.893198c0 66.144466 53.608965 119.776967 119.730918 119.776967l526.939247 0c66.12093 0 119.729895-53.632501 119.729895-119.776967L895.20003 248.542656C895.20003 182.397167 841.591065 128.789225 775.470135 128.789225zM765.646396 401.766386 477.74636 689.689958c-18.687618 18.711154-49.024553 18.711154-67.735707 0L257.581008 537.260314c-18.711154-18.710131-18.711154-49.047066 0-67.734684 18.712177-18.711154 49.024553-18.711154 67.735707 0l118.562303 118.538767L697.911712 334.030679c18.710131-18.688641 49.047066-18.688641 67.734684 0C784.35755 352.741833 784.35755 383.077745 765.646396 401.766386z" p-id="1732"></path></svg>',

            stateText: stateText('待入住'),

            opeBar: function (order) {

                return '        <div class="opeBar" ' +
                    '             style="display: flex; overflow: hidden; height: 32.4px; width: 100%; background-color: rgb(255, 255, 255); position: relative;">' +
                    '            <div style="width: 100%;padding-right: 90px;padding-left: 10px;margin-top: 4px">' +
                    '                        <input class="checkInKey-input" onblur="window.scroll(0,0)" type="number" style="    height: 25px;' +
                    '                        width: 100%;' +
                    '                        text-align: center;' +
                    '                        opacity: 1;' +
                    '                        border: 0px;' +
                    '                        outline: none;' +
                    '                        font-family: inherit;' +
                    '                        font-size: inherit;' +
                    '                        line-height: inherit;' +
                    '                        padding-left: 20px;' +
                    '                        -webkit-rtl-ordering: logical;' +
                    '                        cursor: text;' +
                    '                        box-sizing: border-box;' +
                    '                        border-radius: 40px;' +
                    '                        -moz-border-radius: 40px;' +
                    '                        background: #e4ecf4bd;' +
                    'font-size: 10px;' +
                    '                        color: rgba(0, 0, 100, 0.6);" placeholder="入住码">' +
                    '            </div>' +
                    '            <div ' +
                    '                 style="display: flex; overflow: hidden; position: absolute; height: auto; width: fit-content; margin-right: 12px; right: 0px; top: 0px; margin-bottom: 12px; margin-top: 6px;">' +

                    '<a style="font-size: 13px;margin-top: 4px;margin-right: 2px" href="#">如何使用?</a>' +

                    '            </div>' +
                    '        </div>                                ';
            },

            bindOpe: function (itemId, order) {

                let input = $(itemId + ' .checkInKey-input');

                input.bind('input', function () {


                    //如果长度大于四位就截取
                    if (input.val().length > 4) {
                        input.val(input.val().substr(0, 4));
                    }


                    //如果刚好是四位就进行请求
                    if (input.val().length === 4) {

                        let key = input.val();

                        //请求前先清空输入的内容
                        input.val('');

                        $.post('/order/landlord/transact/checkIn', {checkInKey: key, id: order.id}, function (r) {

                            let stateIconText = $(itemId + ' .stateIconText');
                            let opeBar = $(itemId + ' .opeBar');

                            if (r === 'success') {//显示为入住中的状态

                                //苹果设备需要滚向顶端
                                window.scrollTo(0, 0);

                                changeState(itemId, order, '3');

                            } else if (r === 'failed') {
                                alert('入住码输入错误');
                            } else if (r === 'lock') {

                                //进入锁死状态
                                changeState(itemId, order, '-4');

                            } else if (r === 'termination') {

                                //进入失效状态
                                changeState(itemId, order, '-5');
                            }


                        }).error(function (e) {
                            console.log(e);
                        });

                    }

                });

            }

        },

        '3': {

            stateIcon: '<svg t="1551963480480" class="stateIcon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2563" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 64q95.68 0 182.496 37.152t149.664 100 100 149.664 37.152 182.496-37.152 182.496-100 149.664-149.664 100-182.496 37.152-182.496-37.152-149.664-100-100-149.664-37.152-182.496 37.152-182.496 100-149.664 149.664-100 182.496-37.152zM512 149.344q-78.016 0-149.152 30.496t-122.496 81.824-81.824 122.496-30.496 149.152 30.496 149.152 81.824 122.496 122.496 81.824 149.152 30.496 149.152-30.496 122.496-81.824 81.824-122.496 30.496-149.152-30.496-149.152-81.824-122.496-122.496-81.824-149.152-30.496zM655.68 404.992q17.664 0 30.176 12.512t12.512 30.176-12.672 30.336l-180.992 180.992q-12.32 12.32-30.016 12.32-18.016 0-30.336-12.32l-90.656-90.336q-12.32-12.32-12.32-30.336 0-17.664 12.512-30.176t30.176-12.512 30.336 12.672l60.32 60.32 150.656-151.008q12.672-12.672 30.336-12.672z" p-id="2564"></path></svg>',

            stateText: stateText('房客已入住'),

        },
        '5': {

            stateIcon: '<svg t="1551628991089" class="stateIcon" style="" viewBox="0 0 1105 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2530" xmlns:xlink="http://www.w3.org/1999/xlink" width="215.8203125" height="200"><defs><style type="text/css"></style></defs><path d="M395.815385 303.419077 490.692923 303.419077C495.655385 319.409231 501.720615 331.539692 517.159385 357.454769L598.803692 497.585231 680.487385 358.006154C695.926154 332.091077 702.542769 318.306462 706.953846 303.419077L802.382769 303.419077C795.214769 312.792615 773.159385 344.221538 763.234462 360.211692L687.104 481.595077 717.981538 481.595077C742.793846 481.595077 757.720615 480.492308 775.916308 477.184L775.916308 540.081231C757.169231 536.772923 742.242462 535.670154 717.981538 535.670154L653.430154 535.670154 635.234462 564.342154 635.234462 580.332308 716.878769 580.332308C741.691077 580.332308 755.515077 579.229538 774.813538 575.921231L774.813538 638.818462C756.066462 635.510154 741.139692 634.407385 716.878769 634.407385L635.234462 634.407385 635.234462 671.940923C635.234462 703.369846 636.337231 720.462769 639.645538 742.557538L558.001231 742.557538C560.758154 721.014154 562.412308 698.958769 562.412308 671.940923L562.412308 634.407385 479.113846 634.407385C454.301538 634.407385 439.926154 635.510154 421.179077 638.818462L421.179077 575.921231C440.477538 579.229538 453.750154 580.332308 479.113846 580.332308L562.412308 580.332308 562.412308 563.790769 544.216615 535.670154 480.216615 535.670154C454.852923 535.670154 441.028923 536.772923 422.281846 540.081231L422.281846 477.184C440.477538 480.492308 454.852923 481.595077 480.216615 481.595077L511.094154 481.595077 434.412308 360.211692C418.422154 335.399385 404.086154 313.895385 395.815385 303.419077ZM591.990154 1024C440.162462 1024 304.167385 957.518769 210.432 852.558769L272.699077 804.076308C351.901538 890.643692 465.447385 945.230769 591.990154 945.230769 831.251692 945.230769 1025.220923 751.261538 1025.220923 512 1025.220923 272.738462 831.251692 78.769231 591.990154 78.769231 396.8 78.769231 232.172308 208.029538 178.057846 385.536L243.436308 316.534154C257.378462 301.843692 279.630769 301.489231 293.139692 315.746462 306.609231 330.003692 306.254769 353.476923 292.312615 368.167385L166.124308 501.326769C156.396308 511.606154 142.651077 514.402462 130.638769 510.582154 116.224 513.654154 101.021538 507.313231 93.262769 493.016615L5.12 330.948923C-4.608 313.028923 1.142154 290.146462 18.038154 279.788308 34.894769 269.469538 56.438154 275.613538 66.166154 293.494154L102.872615 360.999385C167.345231 151.985231 361.826462 0 591.990154 0 874.771692 0 1103.990154 229.218462 1103.990154 512 1103.990154 794.781538 874.771692 1024 591.990154 1024Z" p-id="2531"></path></svg>',

            stateText: stateText('退还押金'),

            opeBar: function (order) {

                return '<div class="opeBar" style="background-color: white;">' +


                    '<div  ' +
                    '             style="display: flex; overflow: hidden; height: 32.4px; width: 100%; background-color: rgb(255, 255, 255); position: relative;">' +
                    '            <div ' +
                    '                 style="display: flex; overflow: hidden; position: absolute; height: auto; width: fit-content; margin-right: 100px; right: 0px; top: 0px; margin-bottom: 12px; margin-top: 6px;">' +


                    '                <div ' +
                    '                     style="overflow: hidden; height: 20px; width: 72.25px; border-radius: 15px; visibility: visible; border-color: rgb(152, 96, 96); border-style: solid; border-width: 1px; place-self: flex-start; position: relative;">' +
                    '                    <div ' +
                    '                         style="display: flex; overflow: hidden; position: absolute; color: rgb(152, 96, 96); height: 100%; width: 71.253px; font-size: 13px; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;"' +
                    '                   class="withhold-deposit"><span' +
                    '                            style="text-overflow: ellipsis; overflow: hidden; line-height: 15.6px; white-space: nowrap;">扣留押金</span>' +
                    '                    </div>' +
                    '                </div>' +
                    '            </div>' +
                    '' +
                    '' +
                    '            <div' +
                    '                    style="display: flex; overflow: hidden; position: absolute; height: auto; width: fit-content; margin-right: 12px; right: 0px; top: 0px; margin-bottom: 12px; margin-top: 6px;">' +
                    '                <div' +
                    '                        style="overflow: hidden; height: 20px; width: 72.25px; border-radius: 15px; visibility: visible; border-color: rgb(105,158,210); border-style: solid; border-width: 1px; place-self: flex-start; position: relative;">' +
                    '                    <div' +
                    '                            style="display: flex; overflow: hidden; position: absolute; color: rgb(105,158,210); height: 100%; width: 71.253px; font-size: 13px; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;"' +
                    '                class="refund-deposit-agree" ><span' +
                    '                            style="text-overflow: ellipsis; overflow: hidden; line-height: 15.6px; white-space: nowrap;">退还</span>' +
                    '                    </div>' +
                    '                </div>' +
                    '            </div>' +
                    '' +
                    '' +
                    '        </div></div>';
            },

            bindOpe: function (itemId, order) {

                $(itemId + ' .withhold-deposit').click(function () {

                    //显示扣留页面

                    wd.open(order.deposit, function (v, r) {

                        $.post('/order/pay/withholdDeposit', {
                            id: order.id,
                            withholdDepositReason: r,
                            depositWithhold: v
                        }, function () {
                            changeState(itemId, order, 'withhold-deposit');
                        });

                        wd.close();

                    });

                });

                $(itemId + ' .refund-deposit-agree').click(function () {

                    $.post('/order/landlord/transact/refund-deposit', {id: order.id}, function () {
                        changeState(itemId, order, 'refund-deposit-agree');
                    }).error(function (e) {
                        alert(e.responseText);
                    });

                });


            }
        },

        '-1': {

            stateIcon: '<svg t="1551628991089" class="stateIcon" style="" viewBox="0 0 1105 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2530" xmlns:xlink="http://www.w3.org/1999/xlink" width="215.8203125" height="200"><defs><style type="text/css"></style></defs><path d="M395.815385 303.419077 490.692923 303.419077C495.655385 319.409231 501.720615 331.539692 517.159385 357.454769L598.803692 497.585231 680.487385 358.006154C695.926154 332.091077 702.542769 318.306462 706.953846 303.419077L802.382769 303.419077C795.214769 312.792615 773.159385 344.221538 763.234462 360.211692L687.104 481.595077 717.981538 481.595077C742.793846 481.595077 757.720615 480.492308 775.916308 477.184L775.916308 540.081231C757.169231 536.772923 742.242462 535.670154 717.981538 535.670154L653.430154 535.670154 635.234462 564.342154 635.234462 580.332308 716.878769 580.332308C741.691077 580.332308 755.515077 579.229538 774.813538 575.921231L774.813538 638.818462C756.066462 635.510154 741.139692 634.407385 716.878769 634.407385L635.234462 634.407385 635.234462 671.940923C635.234462 703.369846 636.337231 720.462769 639.645538 742.557538L558.001231 742.557538C560.758154 721.014154 562.412308 698.958769 562.412308 671.940923L562.412308 634.407385 479.113846 634.407385C454.301538 634.407385 439.926154 635.510154 421.179077 638.818462L421.179077 575.921231C440.477538 579.229538 453.750154 580.332308 479.113846 580.332308L562.412308 580.332308 562.412308 563.790769 544.216615 535.670154 480.216615 535.670154C454.852923 535.670154 441.028923 536.772923 422.281846 540.081231L422.281846 477.184C440.477538 480.492308 454.852923 481.595077 480.216615 481.595077L511.094154 481.595077 434.412308 360.211692C418.422154 335.399385 404.086154 313.895385 395.815385 303.419077ZM591.990154 1024C440.162462 1024 304.167385 957.518769 210.432 852.558769L272.699077 804.076308C351.901538 890.643692 465.447385 945.230769 591.990154 945.230769 831.251692 945.230769 1025.220923 751.261538 1025.220923 512 1025.220923 272.738462 831.251692 78.769231 591.990154 78.769231 396.8 78.769231 232.172308 208.029538 178.057846 385.536L243.436308 316.534154C257.378462 301.843692 279.630769 301.489231 293.139692 315.746462 306.609231 330.003692 306.254769 353.476923 292.312615 368.167385L166.124308 501.326769C156.396308 511.606154 142.651077 514.402462 130.638769 510.582154 116.224 513.654154 101.021538 507.313231 93.262769 493.016615L5.12 330.948923C-4.608 313.028923 1.142154 290.146462 18.038154 279.788308 34.894769 269.469538 56.438154 275.613538 66.166154 293.494154L102.872615 360.999385C167.345231 151.985231 361.826462 0 591.990154 0 874.771692 0 1103.990154 229.218462 1103.990154 512 1103.990154 794.781538 874.771692 1024 591.990154 1024Z" p-id="2531"></path></svg>',

            stateText: stateText('申请退款'),

            opeBar: function (order) {

                return '<div class="opeBar" style="background-color: white;">' +

                    '<div style="padding: 15px;padding-top: 5px;padding-bottom: 2px;display: flex; overflow: hidden; flex: 0 0 auto; color: rgb(98, 95, 95);margin-bottom: 5px; height: auto; width: fit-content; font-size: 12px; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;"> <span style="text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;"> &emsp;&emsp;' + order.refundReason + '</span>                                        </div>' +


                    '<div  ' +
                    '             style="display: flex; overflow: hidden; height: 32.4px; width: 100%; background-color: rgb(255, 255, 255); position: relative;">' +
                    '            <div ' +
                    '                 style="display: flex; overflow: hidden; position: absolute; height: auto; width: fit-content; margin-right: 100px; right: 0px; top: 0px; margin-bottom: 12px; margin-top: 6px;">' +


                    '                <div ' +
                    '                     style="overflow: hidden; height: 20px; width: 72.25px; border-radius: 15px; visibility: visible; border-color: rgb(105,158,210); border-style: solid; border-width: 1px; place-self: flex-start; position: relative;">' +
                    '                    <div ' +
                    '                         style="display: flex; overflow: hidden; position: absolute; color: rgb(105,158,210); height: 100%; width: 71.253px; font-size: 13px; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;"' +
                    '                   class="refund-agree"><span' +
                    '                            style="text-overflow: ellipsis; overflow: hidden; line-height: 15.6px; white-space: nowrap;">同意</span>' +
                    '                    </div>' +
                    '                </div>' +
                    '            </div>' +
                    '' +
                    '' +
                    '            <div' +
                    '                    style="display: flex; overflow: hidden; position: absolute; height: auto; width: fit-content; margin-right: 12px; right: 0px; top: 0px; margin-bottom: 12px; margin-top: 6px;">' +
                    '                <div' +
                    '                        style="overflow: hidden; height: 20px; width: 72.25px; border-radius: 15px; visibility: visible; border-color: rgb(152, 96, 96); border-style: solid; border-width: 1px; place-self: flex-start; position: relative;">' +
                    '                    <div' +
                    '                            style="display: flex; overflow: hidden; position: absolute; color: rgb(152, 96, 96); height: 100%; width: 71.253px; font-size: 13px; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;"' +
                    '                class="refund-disagree" ><span' +
                    '                            style="text-overflow: ellipsis; overflow: hidden; line-height: 15.6px; white-space: nowrap;">拒绝</span>' +
                    '                    </div>' +
                    '                </div>' +
                    '            </div>' +
                    '' +
                    '' +
                    '        </div></div>';
            },

            bindOpe: function (itemId, order) {

                $(itemId + ' .refund-agree').click(function () {

                    $.post('/order/landlord/transact/refund', {id: order.id, agree: true}, function () {

                        changeState(itemId, order, 'refund-agree');

                    });

                });

                $(itemId + ' .refund-disagree').click(function () {

                    $.post('/order/landlord/transact/refund', {id: order.id, agree: false}, function () {

                        changeState(itemId, order, 'refund-disagree');
                    });

                });


            }
        },
        '-3': {

            stateIcon: '<svg t="1552133355938" class="stateIcon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="511" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M32.8 1023.2c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3L394 584.7c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L55.4 1013.8c-6.2 6.3-14.4 9.4-22.6 9.4zM734.4 961.4c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3L968.6 650c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L757 952c-6.2 6.3-14.4 9.4-22.6 9.4zM94.6 321.6c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3L328.8 10.2c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L117.2 312.2c-6.2 6.3-14.4 9.4-22.6 9.4z" p-id="512"></path><path d="M607.8 831.7c-8.2 0-16.4-3.1-22.6-9.4L201 438.2c-6-6-9.4-14.1-9.4-22.6S195 399 201 393l256.1-256.1c12.5-12.5 32.8-12.5 45.3 0L886.6 521c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6L630.4 822.4c-6.2 6.2-14.4 9.3-22.6 9.3zM268.9 415.6l338.9 338.9 210.9-210.9-338.9-338.9-210.9 210.9z" p-id="513"></path></svg>',

            stateText: stateText('退款仲裁中'),

        },

        '-4': {

            stateIcon: '<svg t="1551959629360" class="stateIcon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1202" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M812.864 386.88 211.2 386.88c-42.56 0-77.376 34.816-77.376 77.376l0 481.28c0 42.496 34.816 77.376 77.376 77.376l601.664 0c42.432 0 77.248-34.88 77.248-77.376l0-481.28C890.112 421.696 855.296 386.88 812.864 386.88zM560 662.912l0.192 156.096C560.256 858.56 556.032 889.6 512 889.6c-43.968 0-47.744-32.064-47.744-71.488l-1.152-155.2c0 0-30.848-27.136-30.848-73.664C432.256 542.72 468.032 517.76 512 517.76c44.032 0 79.744 25.92 79.744 71.488C591.744 634.88 560 662.912 560 662.912z" p-id="1203"></path><path d="M663.296 318.848 663.296 228.032C663.168 144.64 595.328 76.864 512.064 76.736 428.672 76.864 360.832 144.64 360.768 228.032l0 90.816L285.12 318.848 285.12 228.032C285.184 102.976 386.944 1.216 512 1.152c125.056 0.064 226.88 101.824 226.88 226.88l0 90.816L663.296 318.848z" p-id="1204"></path></svg>',

            stateText: stateText('订单冻结'),

            opeBar: function (order) {

                console.log(order);

                return '<div class="opeBar" style="display: flex; overflow: hidden; height: 32.4px; width: 100%; background-color: rgb(255, 255, 255); position: relative;">            <div style="width: 100%;padding-right: 90px;padding-left: 10px;margin-top: 4px">                        <input style="height: 25px; width: 100%; text-align: center; opacity: 1; border: 0px; outline: none; font-family: inherit; line-height: inherit; padding-left: 20px; -webkit-rtl-ordering: logical; cursor: text; box-sizing: border-box; border-radius: 40px; font-size: 10px; background: rgba(167, 171, 174, 0.74); color: rgb(6, 3, 7);" value="订单已冻结(已给您发送了激活邮件)" disabled="disabled">            </div>            <div style="display: flex; overflow: hidden; position: absolute; height: auto; width: fit-content; margin-right: 12px; right: 0px; top: 0px; margin-bottom: 12px; margin-top: 6px;">                <a style="font-size: 13px;margin-top: 4px;margin-right: 2px"  href="/landlord/resend-unlock-email?orderId=' + order.id + '" target="_blank" >没有收到?</a> </div>        </div>';
            }
        },

        'refund-agree': {

            stateIcon: '<svg t="1551628991089" class="stateIcon" style="" viewBox="0 0 1105 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2530" xmlns:xlink="http://www.w3.org/1999/xlink" width="215.8203125" height="200"><defs><style type="text/css"></style></defs><path d="M395.815385 303.419077 490.692923 303.419077C495.655385 319.409231 501.720615 331.539692 517.159385 357.454769L598.803692 497.585231 680.487385 358.006154C695.926154 332.091077 702.542769 318.306462 706.953846 303.419077L802.382769 303.419077C795.214769 312.792615 773.159385 344.221538 763.234462 360.211692L687.104 481.595077 717.981538 481.595077C742.793846 481.595077 757.720615 480.492308 775.916308 477.184L775.916308 540.081231C757.169231 536.772923 742.242462 535.670154 717.981538 535.670154L653.430154 535.670154 635.234462 564.342154 635.234462 580.332308 716.878769 580.332308C741.691077 580.332308 755.515077 579.229538 774.813538 575.921231L774.813538 638.818462C756.066462 635.510154 741.139692 634.407385 716.878769 634.407385L635.234462 634.407385 635.234462 671.940923C635.234462 703.369846 636.337231 720.462769 639.645538 742.557538L558.001231 742.557538C560.758154 721.014154 562.412308 698.958769 562.412308 671.940923L562.412308 634.407385 479.113846 634.407385C454.301538 634.407385 439.926154 635.510154 421.179077 638.818462L421.179077 575.921231C440.477538 579.229538 453.750154 580.332308 479.113846 580.332308L562.412308 580.332308 562.412308 563.790769 544.216615 535.670154 480.216615 535.670154C454.852923 535.670154 441.028923 536.772923 422.281846 540.081231L422.281846 477.184C440.477538 480.492308 454.852923 481.595077 480.216615 481.595077L511.094154 481.595077 434.412308 360.211692C418.422154 335.399385 404.086154 313.895385 395.815385 303.419077ZM591.990154 1024C440.162462 1024 304.167385 957.518769 210.432 852.558769L272.699077 804.076308C351.901538 890.643692 465.447385 945.230769 591.990154 945.230769 831.251692 945.230769 1025.220923 751.261538 1025.220923 512 1025.220923 272.738462 831.251692 78.769231 591.990154 78.769231 396.8 78.769231 232.172308 208.029538 178.057846 385.536L243.436308 316.534154C257.378462 301.843692 279.630769 301.489231 293.139692 315.746462 306.609231 330.003692 306.254769 353.476923 292.312615 368.167385L166.124308 501.326769C156.396308 511.606154 142.651077 514.402462 130.638769 510.582154 116.224 513.654154 101.021538 507.313231 93.262769 493.016615L5.12 330.948923C-4.608 313.028923 1.142154 290.146462 18.038154 279.788308 34.894769 269.469538 56.438154 275.613538 66.166154 293.494154L102.872615 360.999385C167.345231 151.985231 361.826462 0 591.990154 0 874.771692 0 1103.990154 229.218462 1103.990154 512 1103.990154 794.781538 874.771692 1024 591.990154 1024Z" p-id="2531"></path></svg>',

            stateText: stateText('退款中'),

        },
        'refund-deposit-agree': {

            stateIcon: '<svg t="1551628991089" class="stateIcon" style="" viewBox="0 0 1105 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2530" xmlns:xlink="http://www.w3.org/1999/xlink" width="215.8203125" height="200"><defs><style type="text/css"></style></defs><path d="M395.815385 303.419077 490.692923 303.419077C495.655385 319.409231 501.720615 331.539692 517.159385 357.454769L598.803692 497.585231 680.487385 358.006154C695.926154 332.091077 702.542769 318.306462 706.953846 303.419077L802.382769 303.419077C795.214769 312.792615 773.159385 344.221538 763.234462 360.211692L687.104 481.595077 717.981538 481.595077C742.793846 481.595077 757.720615 480.492308 775.916308 477.184L775.916308 540.081231C757.169231 536.772923 742.242462 535.670154 717.981538 535.670154L653.430154 535.670154 635.234462 564.342154 635.234462 580.332308 716.878769 580.332308C741.691077 580.332308 755.515077 579.229538 774.813538 575.921231L774.813538 638.818462C756.066462 635.510154 741.139692 634.407385 716.878769 634.407385L635.234462 634.407385 635.234462 671.940923C635.234462 703.369846 636.337231 720.462769 639.645538 742.557538L558.001231 742.557538C560.758154 721.014154 562.412308 698.958769 562.412308 671.940923L562.412308 634.407385 479.113846 634.407385C454.301538 634.407385 439.926154 635.510154 421.179077 638.818462L421.179077 575.921231C440.477538 579.229538 453.750154 580.332308 479.113846 580.332308L562.412308 580.332308 562.412308 563.790769 544.216615 535.670154 480.216615 535.670154C454.852923 535.670154 441.028923 536.772923 422.281846 540.081231L422.281846 477.184C440.477538 480.492308 454.852923 481.595077 480.216615 481.595077L511.094154 481.595077 434.412308 360.211692C418.422154 335.399385 404.086154 313.895385 395.815385 303.419077ZM591.990154 1024C440.162462 1024 304.167385 957.518769 210.432 852.558769L272.699077 804.076308C351.901538 890.643692 465.447385 945.230769 591.990154 945.230769 831.251692 945.230769 1025.220923 751.261538 1025.220923 512 1025.220923 272.738462 831.251692 78.769231 591.990154 78.769231 396.8 78.769231 232.172308 208.029538 178.057846 385.536L243.436308 316.534154C257.378462 301.843692 279.630769 301.489231 293.139692 315.746462 306.609231 330.003692 306.254769 353.476923 292.312615 368.167385L166.124308 501.326769C156.396308 511.606154 142.651077 514.402462 130.638769 510.582154 116.224 513.654154 101.021538 507.313231 93.262769 493.016615L5.12 330.948923C-4.608 313.028923 1.142154 290.146462 18.038154 279.788308 34.894769 269.469538 56.438154 275.613538 66.166154 293.494154L102.872615 360.999385C167.345231 151.985231 361.826462 0 591.990154 0 874.771692 0 1103.990154 229.218462 1103.990154 512 1103.990154 794.781538 874.771692 1024 591.990154 1024Z" p-id="2531"></path></svg>',

            stateText: stateText('正在将押金退还给房客'),

        },
        'withhold-deposit': {

            stateIcon: '<svg t="1552181731055" class="stateIcon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4136"  width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 128c-212.0832 0-384 171.9296-384 384.0064C128 724.0832 299.9168 896 512 896s384-171.9168 384-383.9936C896 299.9296 724.0832 128 512 128L512 128zM512 832.0064c-176.7296 0-320-143.2704-320-320C192 335.2704 335.2704 192 512 192c176.7232 0 320 143.2704 320 320.0064C832 688.736 688.7232 832.0064 512 832.0064L512 832.0064zM640 448 383.9936 448C348.6528 448 320 476.6592 320 512.0064 320 547.3472 348.6528 576 383.9936 576L640 576c35.3472 0 64-28.6528 64-63.9936C704 476.6592 675.3472 448 640 448L640 448zM640 448" p-id="4137" fill="#d81e06"></path></svg>',

            stateText: stateText('申请扣留押金'),

        },

        'refund-disagree': {

            stateIcon: '<svg t="1551629244382" class="stateIcon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2788" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 451.66l90.51-90.51c16.662-16.662 43.677-16.662 60.34 0 16.662 16.663 16.662 43.678 0 60.34L572.34 512l90.51 90.51c16.662 16.662 16.662 43.677 0 60.34-16.663 16.662-43.678 16.662-60.34 0L512 572.34l-90.51 90.51c-16.662 16.662-43.677 16.662-60.34 0-16.662-16.663-16.662-43.678 0-60.34L451.66 512l-90.51-90.51c-16.662-16.662-16.662-43.677 0-60.34 16.663-16.662 43.678-16.662 60.34 0L512 451.66z m301.699-241.359c16.662 16.662 16.662 43.678 0 60.34-16.662 16.662-43.678 16.662-60.34 0-133.299-133.3-349.42-133.3-482.718 0-133.3 133.299-133.3 349.42 0 482.718 133.299 133.3 349.42 133.3 482.718 0 94.738-94.738 124.417-234.552 79.422-358.281-8.054-22.145 3.37-46.626 25.515-54.68 22.146-8.053 46.626 3.37 54.68 25.516C969.2 520.52 932.098 695.3 813.699 813.7c-166.624 166.624-436.774 166.624-603.398 0-166.624-166.624-166.624-436.774 0-603.398 166.624-166.624 436.774-166.624 603.398 0z" p-id="2789"></path></svg>',


            stateText: stateText('拒绝退款')


        },
        '-5': {

            stateIcon: '<svg t="1551963749079" class="stateIcon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2821" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M874.338462 149.661538C779.815385 55.138462 645.907692 0 512 0S244.184615 55.138462 149.661538 149.661538C55.138462 244.184615 0 378.092308 0 512s55.138462 267.815385 149.661538 362.338462S378.092308 1024 512 1024s267.815385-55.138462 362.338462-149.661538S1024 645.907692 1024 512s-55.138462-267.815385-149.661538-362.338462zM512 945.230769C275.692308 945.230769 78.769231 748.307692 78.769231 512S275.692308 78.769231 512 78.769231 945.230769 275.692308 945.230769 512 748.307692 945.230769 512 945.230769zM425.353846 370.215385c-15.753846-15.753846-39.384615-15.753846-55.138461 0s-15.753846 39.384615 0 55.138461l220.553846 220.553846c15.753846 15.753846 39.384615 15.753846 55.138461 0s15.753846-39.384615 0-55.138461L425.353846 370.215385z" p-id="2822"></path></svg>',

            stateText: stateText('订单已失效'),

        },

        '-7': {

            stateIcon: '<svg t="1551629244382" class="stateIcon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2788" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 451.66l90.51-90.51c16.662-16.662 43.677-16.662 60.34 0 16.662 16.663 16.662 43.678 0 60.34L572.34 512l90.51 90.51c16.662 16.662 16.662 43.677 0 60.34-16.663 16.662-43.678 16.662-60.34 0L512 572.34l-90.51 90.51c-16.662 16.662-43.677 16.662-60.34 0-16.662-16.663-16.662-43.678 0-60.34L451.66 512l-90.51-90.51c-16.662-16.662-16.662-43.677 0-60.34 16.663-16.662 43.678-16.662 60.34 0L512 451.66z m301.699-241.359c16.662 16.662 16.662 43.678 0 60.34-16.662 16.662-43.678 16.662-60.34 0-133.299-133.3-349.42-133.3-482.718 0-133.3 133.299-133.3 349.42 0 482.718 133.299 133.3 349.42 133.3 482.718 0 94.738-94.738 124.417-234.552 79.422-358.281-8.054-22.145 3.37-46.626 25.515-54.68 22.146-8.053 46.626 3.37 54.68 25.516C969.2 520.52 932.098 695.3 813.699 813.7c-166.624 166.624-436.774 166.624-603.398 0-166.624-166.624-166.624-436.774 0-603.398 166.624-166.624 436.774-166.624 603.398 0z" p-id="2789"></path></svg>',

            stateText: stateText('拒绝扣留押金'),


            opeBar: function (order) {

                return '<div class="opeBar" style="background-color: white;">' +

                    '<div  ' +
                    '             style="display: flex; overflow: hidden; height: 32.4px; width: 100%; background-color: rgb(255, 255, 255); position: relative;">' +


                    '            <div' +
                    '                    style="display: flex; overflow: hidden; position: absolute; height: auto; width: fit-content; margin-right: 12px; right: 0px; top: 0px; margin-bottom: 12px; margin-top: 6px;">' +
                    '                <div' +
                    '                        style="overflow: hidden; height: 20px; width: 72.25px; border-radius: 15px; visibility: visible; border-color: rgb(210,122,124); border-style: solid; border-width: 1px; place-self: flex-start; position: relative;">' +
                    '                    <div' +
                    '                            style="display: flex; overflow: hidden; position: absolute; color: rgb(210,122,124); height: 100%; width: 71.253px; font-size: 13px; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;"' +
                    '                class="arbitration-bt" ><span' +
                    '                            style="text-overflow: ellipsis; overflow: hidden; line-height: 15.6px; white-space: nowrap;">申请仲裁</span>' +
                    '                    </div>' +
                    '                </div>' +
                    '            </div>' +


                    '        </div></div>';
            },

            bindOpe: function (itemId, order) {

                $(itemId + ' .arbitration-bt').click(function () {
                    $.post('/order/landlord/transact/withholdDeposit/arbitration', {id: order.id}, function (t) {

                        //更改状态位仲裁中
                        changeState(itemId, order, '-8');

                    });

                });

            }

        },


        '-8': {


            stateIcon: '<svg t="1552133355938" class="stateIcon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="511" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M32.8 1023.2c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3L394 584.7c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L55.4 1013.8c-6.2 6.3-14.4 9.4-22.6 9.4zM734.4 961.4c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3L968.6 650c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L757 952c-6.2 6.3-14.4 9.4-22.6 9.4zM94.6 321.6c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3L328.8 10.2c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L117.2 312.2c-6.2 6.3-14.4 9.4-22.6 9.4z" p-id="512"></path><path d="M607.8 831.7c-8.2 0-16.4-3.1-22.6-9.4L201 438.2c-6-6-9.4-14.1-9.4-22.6S195 399 201 393l256.1-256.1c12.5-12.5 32.8-12.5 45.3 0L886.6 521c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6L630.4 822.4c-6.2 6.2-14.4 9.3-22.6 9.3zM268.9 415.6l338.9 338.9 210.9-210.9-338.9-338.9-210.9 210.9z" p-id="513"></path></svg>',

            stateText: stateText('扣押金仲裁中'),


        }


    };


    let is;


    function changeState(itemId, order, state) {


        //图标和状态文本是必须的.

        //操作条和绑定函数不是必须的

        //替换图标
        $(itemId + ' .stateIcon').replaceWith(stateMap[state].stateIcon);

        //替换文本
        $(itemId + ' .stateText').replaceWith(stateMap[state].stateText);


        let bar = '';

        if (stateMap[state].opeBar) {
            bar = stateMap[state].opeBar(order);
        }

        //替换操作条
        $(itemId + ' .opeBar').replaceWith(bar);

        if (stateMap[state].bindOpe) {
            //绑定操作条的逻辑
            stateMap[state].bindOpe(itemId, order);
        }

        //刷新iScroll
        is.refresh();
    }


    $('#payed_order_list').height($(window).height() - 165);

    //初始化滑动组件
    is = new IScroll('#payed_order_list', {
        scrollbars: false,
        mouseWheel: false,
        interactiveScrollbars: false,
        shrinkScrollbars: 'scale',
        fadeScrollbars: false,
        scrollY: true,
        probeType: 1,
        bindToWrapper: true,
        click: true,
        tap: true
    });

    //解决手机端无法滑动问题.
    document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, {
        capture: true,
        passive: false
    });


    function append_payedOder(order) {


        let imgU = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546502159888&di=ba8195972eb78359422bb19a4e6b59d1&imgtype=0&src=http%3A%2F%2Fp2.so.qhimgs1.com%2Ft01481b7750ea1d245e.png";

        if (order.room.images && order.room.images.length > 0) {
            imgU = "/resource/preview/3/" + order.room.images[0] + '.jpg';
        }


        let bar = '';

        if (stateMap[order.state].opeBar) {
            bar = stateMap[order.state].opeBar(order);
        }

        let itemId = 'order_' + order.id;

        $('#payed_order_list ul').append('<li id=' + itemId + ' style="padding-top: 5px;padding-bottom: 2px">  <div class="item-card">' +
            '                        <div data-tpl-id="orderlist_head_1" class="tpl-wrapper" data-spm="orderlist_head_1">' +
            '                            <div ' +
            '                                 style="display: flex; overflow: hidden; height: auto; width: 100%; background-color: rgb(255, 255, 255);">' +


            '<div style="display: flex; overflow: hidden; flex: 0 0 auto; height: auto; width: fit-content; place-self: flex-start;">                    <div style="display: flex; overflow: hidden; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 16px; margin-bottom: 16px; margin-left: 12.896px;">' +

            stateMap[order.state].stateIcon +


            '</div>                    <div style="display: flex; overflow: hidden; flex: 0 0 auto; max-width: 166.573px; font-size: 12px; margin-top: 16px; margin-bottom: 16px; margin-left: 5.373px; height: auto; width: fit-content; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">                        <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;">' +


            stateMap[order.state].stateText +


            '</span>                    </div>                </div>' +

            '                            </div>' +
            '                        </div>' +
            '                        <div data-tpl-id="orderlist_sub_1" class="tpl-wrapper" data-spm="orderlist_sub_1">' +
            '                            <div ' +
            '                                 style="display: flex; overflow: hidden; height: auto; width: 100%; background-color: rgb(255, 255, 255);">' +
            '                                <div ' +
            '                                     style="display: flex; overflow: hidden; height: 96.7125px; width: 100%; margin-bottom: 12px; place-self: flex-start; position: relative;">' +
            '                                    <div ' +
            '                                         style="display: flex; overflow: hidden; position: absolute; width: 96.72px; height: 96.72px; margin-left: 12.896px; border-radius: 6px; visibility: visible;">' +
            '                                        <div style="width: 100%; height: 100%; background-image: url(' + imgU + '); background-repeat: no-repeat; background-position: center center; background-size: cover;"></div>' +
            '                                    </div>' +
            '                                    <div ' +
            '                                         style="display: flex;overflow: hidden;position: absolute;background-color: rgb(255, 255, 255);height: auto;top: 0px;padding-right: 70px;margin-left: 120px;margin-right: 12.896px;-webkit-box-orient: vertical;flex-direction: column;">' +
            '                                        <div ' +
            '                                             style="display: flex; overflow: hidden; flex: 0 0 auto; color: rgb(51, 51, 51);margin-bottom: 5px; height: auto; width: fit-content; font-size: 12px; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
            '                                            <span style="text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">' + order.room.name + '</span>' +
            '                                        </div>' +
            '                                        <div ' +
            '                                             style="display: block; overflow: hidden; flex: 0 0 auto; color: rgb(153, 153, 153); margin-bottom: 5px; height: auto; width: fit-content; font-size: 12px; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
            '                                            <span style="text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">' + order.room.location.address + ' ' + order.room.location.detailedDescription +
            '</span>' +
            '                                        </div>' +
            '                                        <div ' +
            '                                             style="display: none; overflow: hidden; width: 100%; height: auto; place-self: flex-start;"></div>' +
            '                                        <div ' +
            '                                             style="display: none; overflow: hidden; -webkit-box-orient: horizontal; flex-direction: row; width: 100%; height: auto; margin-bottom: 5px; place-self: flex-start;"></div>' +
            '                                        <div ' +
            '                                             style="display: none; overflow: hidden; -webkit-box-orient: horizontal; flex-direction: row; width: 100%; height: auto; margin-bottom: 5px; place-self: flex-start;"></div>' +
            '                                        <div ' +
            '                                             style="display: none; overflow: hidden; -webkit-box-orient: horizontal; flex-direction: row; width: 100%; height: auto; margin-bottom: 5px; place-self: flex-start;"></div>' +
            '                                        <div ' +
            '                                             style="display: none; overflow: hidden; color: rgb(255, 159, 0); height: auto; width: 100%; -webkit-box-pack: end; justify-content: flex-end; -webkit-box-align: center; align-items: center; font-size: 12px; margin-top: 12px;">' +
            '                                            <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;"></span>' +
            '                                        </div>' +
            '                                    </div>' +
            '                                    <div ' +
            '                                         style="display: flex; overflow: hidden; position: absolute; right: 0px; top: 0px; margin-right: 12.896px; -webkit-box-orient: vertical; flex-direction: column; height: auto; width: fit-content;">' +
            '                                        <div ' +
            '                                             style="display: flex; overflow: hidden; flex: 0 0 auto; margin-top: 3.5px; margin-bottom: 3.5px; height: auto; width: fit-content; place-self: flex-start;">' +
            '                                            <div ' +
            '                                                 style="display: flex; overflow: hidden; flex: 0 0 auto; color: rgb(51, 51, 51); margin-left: 12.896px; font-size: 12px; visibility: visible; height: auto; width: fit-content; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
            '                                                <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;">' + order.price.text + '</span>' +
            '                                            </div>' +
            '                                            <div ' +
            '                                                 style="display: flex; overflow: hidden; flex: 0 0 auto; color: rgb(51, 51, 51); font-size: 12px; visibility: visible; height: auto; width: fit-content; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
            '                                                <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;"></span>' +
            '                                            </div>' +
            '                                            <div ' +
            '                                                 style="display: flex; overflow: hidden; flex: 0 0 auto; color: rgb(51, 51, 51); font-size: 10px; visibility: visible; height: auto; width: fit-content; place-self: flex-start; margin-top: 2px; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;">' +
            '                                                <span style="text-overflow: ellipsis; overflow: hidden; line-height: 12px; white-space: nowrap;"></span>' +
            '                                            </div>' +
            '                                        </div>' +
            '                                        <div ' +
            '                                             style="display: flex; overflow: hidden; color: rgb(153, 153, 153); font-size: 12px; visibility: visible; margin-top: 3.5px; margin-bottom: 3.5px; -webkit-box-pack: end; justify-content: flex-end; -webkit-box-align: center; align-items: center; height: auto; width: 100%;">' +
            '                                            <span style="text-overflow: ellipsis; overflow: hidden; line-height: 14.4px; white-space: nowrap;">x' + order.priceCount + '</span>' +
            '                                        </div>' +
            '                                    </div>' +
            '                                </div>' +
            '                            </div>' +
            '                        </div>' +


            bar +

            '                    </li>                    ');


        //状态图标和状态文本是一定有的.但是操作条和绑定函数却不是必须

        if (stateMap[order.state].bindOpe) {
            stateMap[order.state].bindOpe('#' + itemId, order);
        }


        is.refresh();
    }


    $.get('/order/landlord/orders', function (ls) {


        for (let i in ls) {
            append_payedOder(ls[i]);
        }
    });


    //使用websocket监听订单的状态变化.并使用alert()展示信息


    //连接
    let socket = new SockJS('/message');
    let client = Stomp.over(socket);


    client.debug = function (str) {

        console.log('debug内容:' + str);

    };

    client.connect({}, function (frame) {

            console.log('连接成功');

            client.subscribe('/user/queue/landlord', function (message) {


                //后端传回的所有的消息都是字符串类型的
                //收到消息的时候,对消息体进行解析
                let msg = JSON.parse(message.body);

                //如果有通知,先显示通知
                if (msg.msg) {
                    alert(msg.msg);
                }


                //吐过需要更新订单
                if (msg.type === 'order.update') {//修改订单状态

                    //先移除原订单
                    $('#order_' + msg.order.id).remove();
                    is.refresh();

                    //如果支持该订单状态,再添加该订单
                    if (stateMap[msg.order.state]) {
                        append_payedOder(msg.order);
                    }

                }

            });
        },
        function (error) {
            alert('错误' + error);
        }
    );


</script>


</html>
